import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { when } from 'lit/directives/when.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Radio/Radio"
  component="bl-radio"
  argTypes={{
    label: {
      control: 'text',
      type: 'string'
    },
    value: {
      control: 'text',
      type: 'string'
    },
    disabled: {
      control: 'boolean',
    },
  }}
/>

export const RadioTemplate = (args) => html`
<bl-radio
    class=${ifDefined(args.itemClass)}
    value=${ifDefined(args.value)}
    ?disabled=${args.disabled}
    >${args.label}</bl-radio>`

export const RadioGroupTemplate = (args) => html`${ when(args.customStyle, () => html`<style>${args.customStyle}</style>\n`) }
<bl-radio-group value=${args.value} class=${ifDefined(args.groupClass)}>
  ${RadioTemplate(args)}
</bl-radio-group>`

# Radio Component

<bl-badge icon="check_fill">RTL Supported</bl-badge>

Radio component is the component for adding options for a `bl-radio-group` component.

<Canvas>
  <Story name="Basic Usage" args={{ label: 'Credit Card', value: 'cc' }}>
    {RadioTemplate.bind({})}
  </Story>
</Canvas>

If wrapping `bl-radio-group` component has the same `value` with an option value, then it becomes selected.

<Canvas>
  <Story name="Selected option" args={{ label: 'Credit Card', value: 'cc' }}>
    {RadioGroupTemplate.bind({})}
  </Story>
</Canvas>

You can set a radio option non-selectable by adding `disabled` attribute.

<Canvas>
  <Story name="Disabled option" args={{ label: 'Cash Payment', value: 'cash', disabled: true }}>
    {RadioTemplate.bind({})}
  </Story>
</Canvas>

An option can be disabled and selected at the same time if value of `radio-group` is same with disabled option value.

<Canvas>
  <Story name="Disabled and selected option" args={{ label: 'Cash Payment', value: 'cash', disabled: true }}>
    {RadioGroupTemplate.bind({})}
  </Story>
</Canvas>

By default radio options are centered vertically. You can change this by setting `--bl-radio-align-items` CSS variable to `flex-start` or `flex-end`.

<Canvas>
  <Story name="Option with large value" args={{ groupClass: 'limited-width', label: 'Very long option text that will not fit to a single line' }}>
    {RadioGroupTemplate.bind({})}
  </Story>
  <Story name="Setting vertical alignment" args={{ groupClass: 'limited-width my-items', customStyle: '.my-items { --bl-radio-align-items: flex-start; }', label: 'Very long option text that will not fit to a single line' }}>
    {RadioGroupTemplate.bind({})}
  </Story>
</Canvas>

## RTL Support

The radio component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 16px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-radio value="credit">Credit Card</bl-radio>
          <br/>
          <bl-radio value="debit" disabled>Debit Card</bl-radio>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-radio value="credit">بطاقة ائتمان</bl-radio>
          <br/>
          <bl-radio value="debit" disabled>بطاقة خصم</bl-radio>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Radio RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .flex-container {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }
    .radio-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="flex-container">
      <!-- LTR Example -->
      <div>
        <h3>LTR Radio</h3>
        <div class="radio-container">
          <bl-radio value="credit">Credit Card</bl-radio>
          <bl-radio value="debit" disabled>Debit Card</bl-radio>
        </div>
      </div>

      <!-- RTL Example -->
      <div dir="rtl">
        <h3>RTL Radio</h3>
        <div class="radio-container">
          <bl-radio value="credit">بطاقة ائتمان</bl-radio>
          <bl-radio value="debit" disabled>بطاقة خصم</bl-radio>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating a radio programmatically
    const createRadio = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const radio = document.createElement('bl-radio');
      radio.value = 'credit';
      radio.textContent = isRTL ? 'بطاقة ائتمان' : 'Credit Card';

      const disabledRadio = document.createElement('bl-radio');
      disabledRadio.value = 'debit';
      disabledRadio.disabled = true;
      disabledRadio.textContent = isRTL ? 'بطاقة خصم' : 'Debit Card';

      container.appendChild(radio);
      container.appendChild(disabledRadio);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-radio" />

